<template>
    <div>
      <goal></goal>
  
      <el-row class="mb-4">
        <el-button type="primary" plain @click="showPlan" style="margin-left: 400px; margin-top: 80px; width: 200px;">
          Primary
        </el-button>
      </el-row>
  
      <!-- 使用 v-if 条件渲染，只有在 showPlanVisible 为 true 时才显示 -->
      <div class="plan" v-if="showPlanVisible">
        <div>
          <Studylearning></Studylearning>
        </div>
        <div>
          <Reccomend></Reccomend>
        </div>
        <div>
          <Around></Around>
        </div>
      </div>
    </div>
  </template>

<script>
import Around from '../../components/plan/around.vue';
import goal from '../../components/plan/goal.vue';
import Reccomend from '../../components/plan/reccomend.vue';
import Studylearning from '../../components/plan/studylearning.vue';

console.log("learnplan");

export default{
components:{
    goal,
    Studylearning,
    Reccomend,
    Around
},
data() {
    return {
      showPlanVisible: false, // 默认不显示
    };
  },
  methods: {
    showPlan() {
      // 当按钮点击时，将 showPlanVisible 设置为 true
      this.showPlanVisible = true;
    },
  },
}
</script>